<!doctype html>
<!--
This is a minified version of the ThemeForest-Theme "Peach - Clean & Smooth Admin Template".
Author: Simon Stamm (Stammi)

Note: If you buy my theme on ThemeForest, you will receive the non-minified and commented/documentated version!
This is a minified version of my theme to prevent stealing.
-->
<!--[if lt IE 7]><html class="no-js ie6 oldie" lang=en><![endif]-->
<!--[if IE 7]><html class="no-js ie7 oldie" lang=en><![endif]-->
<!--[if IE 8]><html class="no-js ie8 oldie" lang=en><![endif]-->
<!--[if gt IE 8]><!-->
<html class=no-js lang=en>
<!--<![endif]-->
<head>
<meta charset=utf-8>
<link rel=dns-prefetch href="//fonts.googleapis.com">
<meta http-equiv=X-UA-Compatible content="IE=edge,chrome=1">
<title>Forms :: Peach &ndash; Clean &amp; Smooth Admin Template</title>
<meta name=description content="">
<meta name=author content="">
<meta name=viewport content="width=device-width,initial-scale=1">
<link rel=stylesheet href='css/1105b53.css'>
<script src="js/modernizr-2.0.6.min.js"></script>
</head>
<body>
<div id=height-wrapper>
  <header>
    <div id=header_toolbar>
      <div class=container_12>
        <h1 class=grid_8>Peach &ndash; Clean &amp; Smooth Admin Template</h1>
        <div class=grid_4>
          <div class=toolbar_small>
            <div class=toolbutton> <span>3</span> <img src="img/mail.png" width=16 height=16 alt=mail> </div>
            <div class=toolbox> <span class=arrow></span>
              <h3>Your Messages</h3>
              <ul class=mail>
                <li> <a href="#"> <strong>10:15</strong>Need your Help! <small> From: John </small> </a> </li>
                <li> <a href="#"> <strong>9:55</strong>New comment on you theme <small> From: themeforest </small></a> </li>
                <li> <a href="#"> <strong>Yest.</strong>Successfull backup <small> From: System </small></a> </li>
                <li class=read> <a href="#"> <strong>2 days</strong>Bug report <small> From: Jane </small></a> </li>
              </ul>
              <a class=inbox href="#">Go to inbox &raquo;</a> </div>
          </div>
          <div class=toolbar_large>
            <div class=toolbutton>
              <div class=toolicon> <img src="img/user.png" width=16 height=16 alt=user> </div>
              <div class=toolmenu>
                <div class=toolcaption> <span>Administrator</span> </div>
                <div class=dropdown>
                  <ul>
                    <li> <a href="#">Settings</a> </li>
                    <li> <a href="#">Logout</a> </li>
                  </ul>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <nav id=header_main>
      <div class=container_12>
        <ul id=nav_main>
          <li> <a href="#"> <img src="img/computer-imac.png" width=25 height=25 alt=""> Dashboard</a>
            <ul>
              <li> <a href="dashboard.html">Dashboard</a> </li>
              <li> <a href="404.html">404</a> </li>
              <li> <a href="login.html">Login</a> </li>
            </ul>
          </li>
          <li class=current> <a href="#"> <img src="img/blocks---images.png" width=25 height=25 alt=""> Elements</a>
            <ul>
              <li class=current> <a href="forms.html">Forms</a> </li>
              <li> <a href="gallery.html">Gallery</a> </li>
              <li> <a href="lists.html">Lists</a> </li>
              <li> <a href="tables.html">Tables</a> </li>
              <li> <a href="tabs.html">Tabs</a> </li>
              <li class=last-child> <a href="wizard.html">Wizard</a> </li>
            </ul>
          </li>
          <li> <a href="#"> <img src="img/user-comment.png" width=25 height=25 alt=""> User Information</a>
            <ul>
              <li> <a href="alert_boxes.html">Alert Boxes</a> </li>
              <li> <a href="messages.html">Messages (Fallr)</a> </li>
              <li> <a href="notifications.html">Notifications</a> </li>
            </ul>
          </li>
          <li> <a href="#"> <img src="img/robot.png" width=25 height=25 alt=""> Plugins</a>
            <ul>
              <li> <a href="charts.html">Charts</a> </li>
              <li> <a href="calendar.html">Calendar</a> </li>
              <li> <a href="explorer.html">Explorer</a> </li>
              <li> <a href="editor.html">Rich Text Editor</a> </li>
              <li> <a href="tooltips.html">Tooltips</a> </li>
            </ul>
          </li>
        </ul>
      </div>
    </nav>
    <div id=nav_sub></div>
  </header>
  <div role=main class=container_12 id=content-wrapper>
    <div id=main_content>
      <h2 class=grid_12>Forms</h2>
      <div class=clean></div>
      <div class=grid_6>
        <div class=box>
          <div class=header> <img src="img/ui-text-field-format.png" alt="" width=16 height=16>
            <h3>Form</h3>
            <span></span> </div>
          <form class=validate novalidate action="" method=get>
            <div class=content>
              <div class=_50>
                <p>
                  <input name=username type=text placeholder=" Your Name" class=required />
                </p>
              </div>
              <div class=_50>
                <p>
                  <input name=email type=email placeholder=" Your E-Mail" class=required />
                </p>
              </div>
              <div class=_100>
                <p>
                  <label> Where are you from? </label>
                  <select name=from class=required>
                    <option></option>
                    <option>Europe</option>
                    <option>America</option>
                    <option>Asia</option>
                    <option>Africa</option>
                  </select>
                </p>
              </div>
              <div class=_50>
                <p>
                  <label for=newsletter>
                  <input name=newsletter type=checkbox class=required />
                  Recieve newsletter? </label>
                </p>
              </div>
              <div class=_50>
                <p> <span class=label>Newsletter type:</span>
                  <label>
                  <input name=htmltext type=radio class=required />
                  Email </label>
                  <label>
                  <input name=htmltext type=radio class=required />
                  HTML </label>
                </p>
              </div>
              <div class=_50>
                <p>
                  <label for=file> Custom file </label>
                  <input name=file type=file class=required />
                </p>
              </div>
            </div>
            <div class=actions>
              <div class=actions-left>
                <input type=reset />
              </div>
              <div class=actions-right>
                <input type=submit />
              </div>
            </div>
          </form>
        </div>
      </div>
      <div class=grid_6>
        <div class=box>
          <div class=header> <img src="img/application-form.png" alt="" width=16 height=16>
            <h3>Form with Alternative Style</h3>
            <span></span> </div>
          <form class=validate>
            <div class="content no-padding">
              <div class="section _100">
                <label> Text field </label>
                <div>
                  <input class=required name=text>
                </div>
              </div>
              <div class="section _100"> <span class=label>Newsletter type</span>
                <div>
                  <div class=input>
                    <label>
                    <input name=htmltext type=radio />
                    Email </label>
                    <label>
                    <input name=htmltext type=radio />
                    HTML </label>
                  </div>
                </div>
              </div>
              <div class="section _100">
                <label for=date> Date Picker </label>
                <div>
                  <input id=date type=date class=required data-date-relative=now>
                </div>
              </div>
              <div class="section _100">
                <label for=datetime> Date and Time Picker </label>
                <div>
                  <input id=datetime type=datetime class=required data-date-relative=now>
                </div>
              </div>
              <div class="section _100">
                <label for=time> Time Picker </label>
                <div>
                  <input id=time type=time class=required data-date-relative=now>
                </div>
              </div>
              <div class="section _100">
                <label for=timeampm> Time Picker (am/pm) </label>
                <div>
                  <input id=timeampm type=time class=required data-date-relative=now data-timeformat=12>
                </div>
              </div>
              <div class="section _100">
                <label> Color selection </label>
                <div>
                  <input name=color type=color>
                </div>
              </div>
            </div>
            <div class=actions>
              <div class=actions-left>
                <input type=reset />
              </div>
              <div class=actions-right>
                <input type=submit />
              </div>
            </div>
          </form>
        </div>
      </div>
      <div class=clear></div>
      <div class=grid_6>
        <div class=box>
          <div class=header> <img src="img/task-select-first.png" alt="" width=16 height=16>
            <h3>Form with Fieldsets</h3>
            <span></span> </div>
          <form method=get action="" class=validate>
            <div class=content>
              <fieldset>
              <legend> Fieldset #1 </legend>
              <div class=_50>
                <p>
                  <label for=textfield1> Textfield #1 </label>
                  <input type=text value="" class=required name=textfield1 class=text>
                </p>
              </div>
              <div class=_50>
                <p>
                  <label for=textfield2> Textfield #2 </label>
                  <input type=text value="" name=textfield2 class=text>
                </p>
              </div>
              <div class=_100>
                <p>
                  <label for=textfield2> Textfield #3 </label>
                  <input type=text value="" class=required name=textfield2 class=text>
                </p>
              </div>
              </fieldset>
              <fieldset>
              <legend> Fieldset #2 </legend>
              <p class=inline-small-label>
                <label for=field4> Textfield #4 </label>
                <input type=text name=field4 class=text>
              </p>
              <p class=inline-small-label>
                <label for=field5> Textfield #5 </label>
                <input type=text name=field5 class=text>
              </p>
              </fieldset>
            </div>
            <div class=actions>
              <div class=actions-left>
                <input type=reset>
              </div>
              <div class=actions-right>
                <input type=submit>
              </div>
            </div>
          </form>
        </div>
      </div>
      <div class=grid_6>
        <div class=box>
          <div class=header> <img src="img/grid.png" alt="" width=16 height=16>
            <h3>Grid</h3>
            <span></span> </div>
          <div class=content>
            <form method=post action="" class=form id=form>
              <div class=_100>
                <p>
                  <label for=100> 100% </label>
                  <input type=text value="" id=100 class=text>
                </p>
              </div>
              <div class=_50>
                <p>
                  <label for=50> 50% </label>
                  <input type=text value="" id=50 class="text">
                </p>
              </div>
              <div class=_50>
                <p>
                  <label for=50> 50% </label>
                  <input type=text value="" id=50 class="text">
                </p>
              </div>
              <div class=_25>
                <p>
                  <label for=25> 25% </label>
                  <input type=text value="" id=25 class=text>
                </p>
              </div>
              <div class=_75>
                <p>
                  <label for=75> 75% </label>
                  <input type=text value="" id=75 class=text>
                </p>
              </div>
              <div class=_25>
                <p>
                  <label for=25> 25% </label>
                  <input type=text value="" id=25 class=text>
                </p>
              </div>
              <div class=_25>
                <p>
                  <label for=25> 25% </label>
                  <input type=text value="" id=25 class=text>
                </p>
              </div>
              <div class=_25>
                <p>
                  <label for=25> 25% </label>
                  <input type=text value="" id=25 class=text>
                </p>
              </div>
              <div class=_25>
                <p>
                  <label for=25> 25% </label>
                  <input type=text value="" id=25 class=text>
                </p>
              </div>
            </form>
          </div>
        </div>
      </div>
      <div class=clear></div>
      <div class=grid_6>
        <div class=box>
          <div class=header> <img src="img/layer-shape-line.png" alt="" width=16 height=16>
            <h3>Inline Form</h3>
            <span></span> </div>
          <div class=content>
            <p class=inline-label>
              <label for=field1> Inline Label </label>
              <input type=text name=field1>
            </p>
            <p class=inline-medium-label>
              <label for=field2> Medium Label </label>
              <input type=text name=field2>
            </p>
            <p class=inline-small-label>
              <label for=field3> Small Label </label>
              <input type=text name=field3>
            </p>
            <p class=inline-mini-label>
              <label for=field4> Mini Label </label>
              <input type=text name=field4>
            </p>
          </div>
        </div>
      </div>
    </div>
    <div class=clear></div>
  </div>
  <div class="clear push"></div>
</div>
<footer>
  <div class=container_12> Copyright &copy; 2011 YourCompany, all rights reserved.
    <div id=button_bar>
      <ul>
        <li> <span><a href="dashboard.html">Dashboard</a></span> </li>
        <li> <span><a href="#">Settings</a></span> </li>
      </ul>
    </div>
  </div>
</footer>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.0/jquery.min.js"></script>
<script>window.jQuery||document.write('<script src="js/libs/jquery-1.7.1.min.js"><\/script>');</script>
<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/jquery-ui.js"></script>
<script>window.jQuery.ui||document.write('<script src="js/libs/jquery-ui-1.8.16.min.js"><\/script>');</script>
<script defer src='js/23acda8.js'></script>
<!--[if lt IE 7 ]><script defer src="//ajax.googleapis.com/ajax/libs/chrome-frame/1.0.3/CFInstall.min.js"></script> <script defer>window.attachEvent("onload",function(){CFInstall.check({mode:"overlay"})});</script><![endif]-->
</body>
</html>
